<template>
  <view v-if="data.showView" :style="styleT()" class="choose-view" @tap="hide">
    <scroll-view class="choose-wrap" :scroll-y="true">
      <view v-if="type === 1" class="item" @tap="tapSelect">
        全部
        <view v-show="data.selectId === ''" class="icon iconfont icon-select"></view>
      </view>
      <view v-for="(item, index) in data.list" :key="index" class="item" @tap="tapSelect(item)">
        <text>{{ item[label] }}</text>
        <view v-show="data.selectId == item.id" class="icon iconfont icon-select"></view>
      </view>
    </scroll-view>
  </view>
</template>

<script lang="ts" setup>
import { reactive } from 'vue';
import { getSystemInfo, getwv } from '@mixins/info';
const styleT = () => {
  // #ifdef MP-WEIXIN
  return `top: ${getSystemInfo().navHeight + 40}px`;
  // #endif
  // #ifdef H5
  return `top: ${getSystemInfo().navHeight + getwv(41)}px`;
  // #endif
};

interface Props {
  type?: number; // 默认1 有全部  2无全部
  label?: string;
  selectId?: string;
  selectItem?: any;
}
const prop = withDefaults(defineProps<Props>(), {
  type: 1,
  label: 'name',
  selectId: '',
  selectItem: {},
});
const data = reactive({
  showView: false,
  list: [] as any,
  selectId: prop.selectId,
  selectItem: prop.selectItem,
});

const show = (arr: any) => {
  data.list = arr;
  data.showView = true;
};
const hide = () => {
  data.showView = false;
};

const getShow = () => {
  return data.showView;
};

const emit = defineEmits(['get-data']);
const tapSelect = (item: any) => {
  data.selectId = item?.id || '';
  data.selectItem = item || {};
  emit('get-data');
  hide();
};

const getSelect = () => {
  return data.selectItem;
};

const getSelectId = () => {
  return data.selectId;
};

defineExpose({
  show,
  hide,
  getShow,
  getSelect,
  getSelectId,
});
</script>

<style lang="scss" scoped>
.choose-view {
  position: absolute;
  width: 100vw;
  height: auto;
  bottom: 77px;
  background: rgba(0, 0, 0, 0.2);
  overflow: hidden;
  z-index: 1;

  .choose-wrap {
    max-height: 287px;
    background: #fff;
    font-size: 14px;
    color: #858585;
    overflow: auto;

    .item {
      margin: 0 16px;
      height: 40px;
      line-height: 40px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.03);
    }

    .icon-select {
      color: $uni-color-primary;
      float: right;
    }
  }
}
</style>